<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>

<body>
<div id="hello-vue" class="demo">
  kilometers: <input type="text" v-model="kilometers" @focus="cur = 'kilometers'" />
  meters: <input type="text" v-model="meters" @focus="cur = 'meters'" />
</div>

<div id="info">

</div>
<script>
var app = {
  data(){
    return {
      kilometers:0,
      meters:0,
      // cur:'',
    }
  },
  watch:{
    kilometers:function(New,Old){
      console.log("watch K New",New)
      console.log("watch K Old",Old)
      console.log("this.cur:",this.cur)
      if (this.cur == 'kilometers'){
        this.kilometers = New
        this.meters = New*1000
      }
    },
    meters:function(New,Old){
      console.log("watch M New",New)
      console.log("watch M Old",Old)
      console.log("this.cur:",this.cur)
      if (this.cur == 'meters'){
        this.kilometers = New/1000
        this.meters = New
      }

    }
  }
}

var vm =  Vue.createApp(app).mount('#hello-vue')

vm.$watch('kilometers', function(NEW,OLD){
  console.log("vm.$watch NEW:",NEW)
  console.log("vm.$watch OLD:",OLD)
  document.getElementById('info').innerHTML = "kilometers before change:"+OLD+"after change:"+NEW
})


</script>
</body>
</html>
